<template>
  <el-dialog
    v-model="visible"
    title="征集参与者"
    :close-on-click-modal="false"
    style="width: 80%;"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="120px"
      @onclick="onSubmit()"
    >
      <div class="main">
        <div class="content">
          <div class="order-number">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="征集活动标题:">
                  <span class="text">{{ parentInfo.title }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="征集活动介绍:">
                  <span class="text">{{ parentInfo.description }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="联系人:">
                  <span class="text">{{ dataInfo.contact }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="提交人:">
                  <span class="text">{{ dataInfo.realName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="联系电话:">
                  <span class="text">{{ dataInfo.phone }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="学校名称:">
                  <span class="text">{{ dataInfo.school }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="电子邮箱:">
                  <span class="text">{{ dataInfo.email }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="提交时间:">
                  <span class="text">{{ dataInfo.createdAt }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="工作坊类别:">
                  <span
                    v-if="dataInfo.workType === 1"
                    class="text"
                  >非遗传承与创新</span>
                  <span
                    v-if="dataInfo.workType === 2"
                    class="text"
                  >红色文化主题创作</span>
                  <span
                    v-if="dataInfo.workType === 3"
                    class="text"
                  >生态文明主题创作</span>
                  <span
                    v-if="dataInfo.workType === 4"
                    class="text"
                  >科技与艺术融合创新</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="方案说明:">
                  <span class="text">{{ dataInfo.description }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="上传申报材料:">
                  <span v-for="url in fileList" style="flex-direction: column;align-items: flex-start">
                    <a>{{ url }}</a><br>
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="作品评分:">
                  <el-input-number
                    v-model="dataForm.score"
                    :precision="2"
                    :min="0"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="作品评审:">
                  <el-select v-model="dataForm.approval" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="onSubmit()"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const dataForm = ref({
  id: null,
  score: 0,
  approval: 0,
  status: 0
})
const dataInfo = ref(null)
const parentInfo = ref(null)
const visible = ref(false)
const fileList = ref([])

const options = reactive([
  {
    value: 0,
    label: '未通过'
  }, {
    value: 1,
    label: '已通过'
  }
])
/**
 * 获取数据列表
 */
const init = (data, parentData) => {
  visible.value = true
  dataInfo.value = data
  parentInfo.value = parentData.value
  dataForm.value.id = dataInfo.value.id
  dataForm.value.status = dataInfo.value.status
  if (dataInfo.value.fileUrl.indexOf(",")) {
    fileList.value = dataInfo.value.fileUrl.split(',');
  } else {
    fileList.push(dataInfo.value.fileUrl)
  }
}
defineExpose({ init })

const onSubmit = () => {
}
</script>
<style scoped lang="scss">
.main {
  height: 100%;
  width: 100%;
  font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #495060;
}
.content {
  margin: 0 20px;
  .order-state {
    position: relative;
    margin-top: 50px;
    border-bottom: 1px solid #e9eaec;
  }
}
.order-number {
  .text {
    font-size: 14px;
    color: #8a8a8a;
  }
}
</style>
